<template>
  <div class="upgradeCarStageDistributionComp">
    <div class="upgradeCarStageDistributionTop">
      <h3 class="withLine title14">
        {{ $t('sjcljdfb') }}
      </h3>
    </div>
    <div class="upgradeCarStageDistributionMain">
      <loading-state :echartShowStatus="echartShowStatus" class="chartMain">
        <div ref="chartDom" style="height: 100%" v-show="echartShowStatus === 2"></div>
      </loading-state>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { funnelChartOption } from '../config/chart'
import lodash from 'lodash'
export default {
  components: {
  },
  props: {
    taskId: {
      type: String,
      default: ''
    }
  },
  computed: {

  },
  watch: {
    taskId: {
      handler (val) {
        this.getChartData(val)
      },
      immediate: true
    }
  },
  data () {
    return {
      echartShowStatus: -1,
      chartOption: lodash.cloneDeep(funnelChartOption),
      chart: null,
      dateRangeString: []
    }
  },
  methods: {
    onRangeChange (date, dateString) {
      this.dateRangeString = dateString
    },
    // 时间限制范围 结束时间不能超过今天
    disabledDate (current) {
      return current > moment().endOf('day')
    },
    getChartData () {
      this.echartShowStatus = 1
      this.getChartMockData().then(res => {
        console.log(res, 'res')
        if (res.data) {
          this.echartShowStatus = 2
          this.chartOption.series[0].data = res.data
          this.$nextTick(() => {
            this.initChartBox()
            this.setOption()
            this.bindEvent()
          })
        } else {
          this.echartShowStatus = 3
        }
      })
    },
    getChartMockData () {
      return new Promise((resolve) => {
        setTimeout(() => {
          const data = [
            { value: 60, name: '升级成功' },
            { value: 85, name: '下载成功' },
            { value: 90, name: '检测成功' },
            { value: 100, name: '全部车辆' }
          ]
          resolve({ data })
        }, 1000)
      })
    },
    initChartBox () {
      if (this.chart) {
        return
      }
      this.chart = this.$echarts.init(this.$refs.chartDom)
    },
    setOption () {
      if (!this.chart) {
        return
      }
      this.chart.setOption(this.chartOption)
    },
    bindEvent () {
      window.addEventListener('resize', this.resizeChart)
    },
    resizeChart () {
      this.chart && this.chart.resize()
    }
  },
  beforeDestroy () {
    const vm = this
    if (vm.chart) {
      window.removeEventListener('resize', vm.resizeChart)
    }
  }
}
</script>
<style lang="less" scoped>
.upgradeCarStageDistributionComp {
    .upgradeCarStageDistributionTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 34px;
        margin-bottom: 15px;
    }
    .upgradeCarStageDistributionMain {
        height: 448px;
        position: relative;
    }
}
</style>
